<template>
  <div style="padding: 40px">

    <el-table :data="tableData" border stripe style="width: 100%;" header-align="center" align="center">
      <el-table-column label="用户ID" width="70px"  header-align="center" align="center">
        <template slot-scope="scope">
          {{ (currentPage - 1) * pageSize + scope.$index + 1 }}
        </template>
      </el-table-column>
      <el-table-column label="头像" header-align="center" align="center">
        <template #default="scope">
          <img :src="scope.row.userAvatar" alt="用户头像" style="width: 50px; height: 50px; border-radius: 50%;" />
        </template>
      </el-table-column>
      <el-table-column prop="clazzName" label="班级名称" header-align="center" align="center"/>
      <el-table-column prop="userAccount" label="用户账号" header-align="center" align="center"/>
      <el-table-column prop="username" label="用户人姓名" header-align="center" align="center"/>
      <el-table-column prop="telephone" label="联系电话" header-align="center" align="center"/>
      <el-table-column prop="address" label="居住地址" header-align="center" align="center"/>
      <el-table-column prop="userProfile" label="简介" header-align="center" align="center" />
      <el-table-column prop="userRole" label="身份" header-align="center" align="center"/>
<!--      <el-table-column prop="userName" label="负责人姓名" />-->
      <el-table-column fixed="right" label="操作" width="200" header-align="center" align="center">
        <template #default="scope">
          <!-- 编辑按钮  -->
          <el-button type="primary" @click="handleEdit(scope.row)">更新</el-button>

<!--           删除按钮 -->
          <el-popconfirm title="这段内容确定删除吗?" @onConfirm="handleDelete(scope.row.id)">
            <template #reference>
              <el-button type="danger">删除</el-button>
            </template>
          </el-popconfirm>
        </template>
      </el-table-column>
    </el-table>



    <!-- 点击编辑的弹窗 -->
    <el-dialog :visible.sync="dialogVisible1" title="更新用户信息" width="30%">

      <el-form :model="form1" label-width="120px">
        <el-form-item label="用户账号">
          <el-input v-model="form1.userAccount" style="width: 50%"></el-input>
        </el-form-item>
        <el-form-item label="用户名称">
          <el-input v-model="form1.username" style="width: 50%"></el-input>
        </el-form-item>
        <el-form-item label="居住地址">
          <el-input v-model="form1.address" style="width: 50%"></el-input>
        </el-form-item>
        <el-form-item label="联系电话">
          <el-input v-model="form1.telephone" style="width: 50%"></el-input>
        </el-form-item>
        <el-form-item label="班级名称">
          <el-input v-model="form1.clazzName" style="width: 50%"></el-input>
        </el-form-item>
        <el-form-item label="简介">
          <el-input v-model="form1.userProfile" style="width: 50%"></el-input>
        </el-form-item>
        <el-form-item label="密码">
          <el-input v-model="form1.password" style="width: 50%"></el-input>
        </el-form-item>
        <el-form-item label="身份">
          <el-input v-model="form1.userRole" style="width: 50%"></el-input>
        </el-form-item>

      </el-form>


      <span slot="footer" class="dialog-footer">
        <el-button @click="dialogVisible1 = false">取消</el-button>
        <el-button type="primary" @click="saveEdit">确定</el-button>
      </span>

    </el-dialog>
    <el-pagination
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page="currentPage"
        :page-size="pageSize"
        layout="total,prev, pager, next, jumper"
        :total="total">
    </el-pagination>


  </div>
</template>

<script>
import { mapGetters } from 'vuex'
import {
  getUserUpdate,
  getGuanXinStu,
  getGuanliFuZerenAll,
  getGuanLiYuanUpdateUser,
  getGuanXinStudentCreat
} from '@/http/userList.js'
import {getGuanliStudentDeleteS, getGuanliSUp} from "@/http/user";
import {getTeachUpload} from "@/http/minio";

export default {
  name: "Notice",

  data() {
    return {
      form: {
        "address": "",
        "clazzName": "",
        "id": "",
        "password": "",
        "telephone": "",
        "userAccount": "",
        "userProfile": "",
        "userRole": {},
        "username": ""
      },
      form1: {
        "address": "",
        "clazzName": "",
        "id": "",
        "password": "",
        "telephone": "",
        "userAccount": "",
        "userProfile": "",
        "userRole": {},
        "username": ""
      },

      dialogVisible: false,
      dialogVisible1: false,
      dialogVisible2: false,
      currentPage: 1,
      pageSize: 10,
      total:0,
      tableData: [],
      ttid: '',
      ttcontent: '',
      tpubTime: '',
      ttitle: ''
    }

  },
  created() {
    this.load()
  },

  methods: {

    async  handelChange(file, fileList){
      let formData =  new FormData()
      formData.append("data", file.raw);
      const res = await  getTeachUpload(formData)
      this.fileList =  [{name: 'food.jpg', url: res}]
    },
    async load() {
      const { code, message, data } = await getGuanliFuZerenAll({current: this.currentPage, size: this.pageSize})
      console.log(data)
      this.tableData = data.records
      this.total= Number(data.total)

    },

    // 编辑
    handleEdit(row) {
      console.log(row);
      this.form1 = { ...row }
      this.dialogVisible1 = true
    },
    // 确认修改
    async saveEdit() {
      const { code, message } = await getGuanliSUp(this.form1)
      if (code == '0') {
        this.$message({
          type: "success",
          message: "修改成功"
        })
      } else {
        this.$message({
          type: "error",
          message: "修改失败"
        })
      }
      this.dialogVisible1 = false
      this.load()
    },
    async handleDelete(id) {
      console.log("id");
      const { code, message } = await getGuanliStudentDeleteS({ id: id })
      if (code == '0') {
        this.$message({
          type: "success",
          message: "删除成功"
        })
      } else {
        this.$message({
          type: "error",
          message: message
        })
      }
      this.load()  // 删除之后重新加载表格的数据
    },
    handleSizeChange(pageSize ) {
      this.pageSize = pageSize;
      this.currentPage = 1;
      this.load()
    },
    async handleCurrentChange(pageNum) {
      this.currentPage = pageNum
      const { code, message, data } = await getGuanliFuZerenAll({ current: pageNum, size: this.pageSize })
      console.log(data)
      this.tableData = data.records
      this.total= Number(data.total)
      this.load(); // 重新加载数据
    },
    onDaloag(row) {
      this.form1 = row
      this.dialogVisible2 = true
    }
  },
  computed: {
    ...mapGetters({
      userRole: 'user/getUserRole'
    })
  }

}
</script>

<style></style>
